<template>
  <div class='topicList'>
    <div style="margin-top:10px">
      <el-table :data="tableData" style="width: 100%" fit border stripe size="mini" highlight-current-row :header-cell-style="{background:'#e5e5e5',color:'#000'}">
        <el-table-column prop="name" label="Topic名称">
          <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
            <el-button :data-clipboard-text='scope.row.name' class="jumpUrl" @click="onCopy('jumpUrl')" type="text">复制</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="auth" label="Topic权限">
        </el-table-column>
        <el-table-column prop="type" label="集群特性">
        </el-table-column>
        <el-table-column prop="remark" label="Topic描述">
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <pagination v-show="pagination.total>0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
      </div>
    </div>

  </div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      tableData: [{ name: "ds8VPKAx4633/out/008" }],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10
      },
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  methods: {
    getPageList() {
      this.search()
    },
    search() {
      const p = Object.assign({}, this.pagination)
      // api.page(p).then(resp => {
      //   this.tableData = resp.data.list
      //   this.pagination = resp.data.pagination
      //   this.pagination.page = resp.data.pagination.current
      // })
    },
    onCopy(name) {
      console.log(`.${name}`);
      var clipboard = new Clipboard(`.${name}`)
      // debugger
      clipboard.on('success', e => {
        // success("复制成功");//这里你如果引入了elementui的提示就可以用，没有就注释即可
        this.$message({
          message: '复制成功',
          type: 'success'
        });
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    }
  },
}
</script>
<style lang='scss' scoped>
.topicList {
  padding: 10px;
}
</style>